<template>
  <div id="main">
    <el-col span="16">
      <div id="left">
        <el-card id="title" shadow="hover">
          <h2>{{payInfo.subject}}</h2>
          <p v-show="payInfo.category!=null">{{payInfo.category}}</p>
          <p v-if="payInfo.startTime==payInfo.endTime">{{payInfo.startTime}}</p>
          <p v-else>{{payInfo.startTime}}至{{payInfo.endTime}}</p>

        </el-card>
        <el-card id="user_info" shadow="hover">
          <el-form :model="payInfo" :rules="rules" ref="payInfo">
            <h2>信息填写</h2>
            <p>为方便旅行及时与您联系，请准确填写联系方式（手机号码电子邮件）</p>
            <div>
              <el-form-item prop="useName" style="display: inline-block">
              <div class="user">
                <p style="margin-top: 20px">姓名</p>
                <el-input class="info" v-model="payInfo.useName"></el-input>
              </div>
              </el-form-item>
              <el-form-item prop="phone" style="display: inline-block">
              <div class="user" >
                <p>电话</p>
                <el-input class="info" v-model="payInfo.phone"></el-input>
              </div>
              </el-form-item>
            </div>
            <div>
              <el-form-item prop="email" style="display: inline-block">
              <div class="user">
                <p>邮箱</p>
                <el-input class="info" v-model="payInfo.email"></el-input>
              </div>
              </el-form-item>
              <el-form-item style="display: inline-block">
              <div>
                <p>数量</p>
                <el-input-number v-model="payInfo.quantity" :min="1" :max="10" label="购买数量" @change="onChange"></el-input-number>
              </div>
              </el-form-item>
            </div>

            <div style="margin-top: 70px;padding-bottom: 20px">
              <span style="font-size: 15px">在线付<span style="font-weight: bold;font-size:25px;color: #FF6600;margin-left: 5px">¥{{ payInfo.totalAmount }}</span></span>
              <el-button type="primary" style="float: right" @click="pay('payInfo')"><span style="color: white">去支付</span></el-button>
            </div>
          </el-form>
        </el-card>
      </div>

    </el-col>
    <el-col span="8">
      <el-card id="right" shadow="hover">
        <h5>费用明细</h5>
        <div style="margin-top: 20px">
          <span>基本费用</span>
          <span style="float: right">¥{{payInfo.price}}</span>
        </div>
        <div style="margin-top: 5px">
          <span style="float: right;color: #666;font-size: 13px">¥{{payInfo.price}}×{{payInfo.quantity}}</span>
        </div>
        <div style="margin-top: 50px">
          <span>全部优惠</span>
          <span style="float: right">-¥{{discount}}</span>
        </div>
        <div style="margin-top: 5px">
          <span style="color: #666;font-size: 13px;">现在购买，享60元优惠</span>
          <span style="float: right;color: #666;font-size: 13px">-¥{{discount}}×{{payInfo.quantity}}</span>
        </div>
        <div style="margin-top: 40px;float: right">
          <div>
            <span style="font-size: 20px;font-weight: bold">总价</span>
            <span style="margin-left: 10px;font-weight: bold;font-size:30px;color: #FF6600" >¥{{ payInfo.totalAmount }}</span>
          </div>
          <el-tag type="" effect="light" style="float: right" size="small">已省:¥{{ totalDiscount }}</el-tag>
        </div>
      </el-card>
    </el-col>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      payInfo: {id:'',subject:'',subjectId:'',categoryId:'',category:'',useName:'',email:'',
      phone:'',price:'',quantity:1,totalAmount:'',startTime:'',endTime:'',dateDiff:'',userId:''},
      submitInfo: {},
      discount:'60',
      totalDiscount:'',
      rules: {
        useName: [
          { required: true, message: "请输入名字", trigger: "blur" },
          {min: 2, max: 5, message: "请输入正确的名字", trigger: "blur"},
        ],

        email:[
          {required: true, message: '请输入邮箱地址', trigger: 'blur'},
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],

        phone:[{ required: true, message: '请填写手机号码', trigger: 'blur' },
          { min: 11, max: 11, message: '手机号码不低于11位数', trigger: 'blur' },
          { pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, message: '请输入正确的手机号码格式' }]
      },
    }
  },
  methods:{
    onChange(){
      this.payInfo.totalAmount=(this.payInfo.price-this.discount)*this.payInfo.quantity;
      this.totalDiscount=this.discount*this.payInfo.quantity;
    },
    pay(info){
      this.$refs[info].validate((valid) => {
        if (valid) {
          this.submitInfo=this.payInfo;
          this.submitInfo.startTime=new Date(this.payInfo.startTime)
          this.submitInfo.endTime=new Date(this.payInfo.endTime)
          this.submitInfo.userId=localStorage.getItem("id")
          console.log(this.submitInfo)
          this.axios
              .create({"headers": {"Authorization": localStorage.getItem("localJwt")}})
              .post("http://localhost:8080/alipay/trade/", this.submitInfo).then((response) => {
            const div = document.createElement('div')
            div.innerHTML = response.data;
            console.log(response.data)
            document.body.appendChild(div);
            document.forms['punchout_form'].setAttribute('target', '_blank');
            document.forms['punchout_form'].submit()
            this.payInfo.startTime=this.formatDate(this.payInfo.startTime)
            this.payInfo.endTime=this.formatDate(this.payInfo.endTime)
            this.$confirm('您是否已经付款?', '提示', {
              confirmButtonText: '我已付款',
              cancelButtonText: '取消',
            }).then(async () => {
              this.axios
                  .create({"headers":{"Authorization":localStorage.getItem("localJwt")}})
                  .post("http://localhost:8080/alipay/"+order.orderNo+"/status").then((response)=>{
                if(response.data.code==1){
                  this.$message({
                    message: "付款成功，即将跳转到订单",
                    type: 'success'
                  });
                  this.$router.push('/order')
                }else {
                  this.$message({
                    message: response.data.msg,
                    type: 'warning'
                  });
                }
              })
            }).catch((e) => {
              this.$router.push('/order')
            })
          })
        }
      })
    },
    formatDate (d) {
      var date = new Date(d);
      var YY = date.getFullYear() + '-';
      var MM =
          (date.getMonth() + 1 < 10
              ? '0' + (date.getMonth() + 1)
              : date.getMonth() + 1) + '-';
      var DD = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
      return YY + MM + DD;
    },
  },
  created() {
    if(!localStorage.getItem("id")) {
      this.$message.error("请先登录")
      setTimeout(() => {
        history.back()
      }, 1000)
    }
  },
  mounted(){
    console.log(this.info) // 输出参数值
    this.payInfo.id=this.info.id;
    this.payInfo.subject=this.info.subject;
    this.payInfo.subjectId=this.info.subjectId;
    this.payInfo.category=this.info.category;
    this.payInfo.categoryId=this.info.categoryId;
    this.payInfo.dateDiff=this.info.dateDiff;
    if(this.payInfo.category==null){
      this.payInfo.price=this.info.price;
    }else {
      this.payInfo.price=this.info.price*this.info.dateDiff;
    }
    this.payInfo.startTime=this.info.startDate;
    this.payInfo.endTime=this.info.endDate;
    this.payInfo.totalAmount=(this.payInfo.price-this.discount)*this.payInfo.quantity;
    this.totalDiscount=this.discount*this.payInfo.quantity;
  },

  props:['info']
}
</script>

<style scoped>

#main{
  width: 1200px;
  margin: 0 auto;
}

#title p{
  margin: 0 30px 0 0;
  padding: 0;
  display: inline-block;
}
#user_info{
  margin-top: 20px;
}
#user_info p{
  font-size: 14px;
  color: #666;
}
.user /deep/.el-input__inner{
  border:none;
  border-bottom: 1px solid #666;
  border-radius: 0;
  padding: 0;
  width: 300px;
  margin-right: 50px;
  font-weight: bold;
  font-size: 18px;
  color: #2c3e50;
}
.user /deep/.el-input__inner:hover{
  border:none;
  border-bottom: 1px solid dodgerblue;
}
#right span{
  font-size: 15px;
}
</style>